<template>
    <div class="footerbox">
        <van-tabbar v-model="active">
            <van-tabbar-item name="shop-collect-o" icon="shop-collect-o" @click="gohome">首页</van-tabbar-item>
            <van-tabbar-item name="apps-o" icon="apps-o" @click="gotoclass">分类</van-tabbar-item>
            <van-tabbar-item name="shopping-cart-o" icon="shopping-cart-o" @click="gotocar">购物车</van-tabbar-item>
            <van-tabbar-item name="user-o" icon="user-o" @click="gotomine">我的</van-tabbar-item>
        </van-tabbar>
    </div>


</template>

<script lang="ts" setup>
import { ref, type Ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const active = ref('home')
const gohome = () => {
    router.push('/home')
}
const gotoclass = () => {
    router.push('/class')
}
const gotocar = () => {
    router.push('/car')
}
const gotomine = () => {
    router.push('/user')
}
</script>

<style lang="scss" >
.footerbox {
    z-index: 1000;
}
</style>